<template>
  <div class="bucket-parking">
    <BasicCard style="margin-top: 12px">
      <BasicVxeTable ref="gridRef" v-bind="gridOption" v-on="gridEvents"> </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-top: 12px">
      <BasicTitle title="数据分析"></BasicTitle>
      <div id="zuXingTuID" style="width: 99%; height: 400px; overflow: hidden"></div>
    </BasicCard>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import * as echarts from 'echarts'
  import { COLOR_ARR } from '@/utils/constants/common'
  import type { VxeGridListeners } from 'vxe-table'
  import { handleBucketParkingColumnsList } from '../../data'
  import {
    getjiTaiPingZhongChaXun,
    postTiaoTongTingCheBaoGao_combine
  } from '@/api/shengChanJianShi'

  const props = defineProps<{
    processName: string
    statusCode: string
  }>()

  const { t } = useI18n()

  const gridOption = reactive<BasicGridProps>({
    cellClassName({ column }) {
      if (column.field === 'machineName') {
        return 'col-underline'
      }
      return null
    },
    extraConfig: {
      title: t('custom.统计报表'),
      isCustom: false,
      isExport: false,
      isFilterAndSort: false
    }, // 拓展的配置
    id: `bucket-parking-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    maxHeight: 500,
    columns: handleBucketParkingColumnsList(props.statusCode)
  })

  const reportData: any = ref([])
  const getReportList = () => {
    postTiaoTongTingCheBaoGao_combine(
      {
        tsIdStart: '25071401',
        tsIdEnd: '25071401',
        machineDocumentIds: [
          'a98521d3-6d16-dee4-7df5-3a07f91178e8',
          'a40e26dc-b434-7f6f-e44e-3a07f919daa5',
          'f1835acb-11ff-ef8c-caff-3a07f919dcae',
          'ea792823-1160-5d46-f8e7-3a07f919de90',
          '7f860965-12c1-d154-520e-3a07f919e07a',
          '5090b681-f313-ad17-1348-3a07f919e398',
          '5fc0da27-c336-9417-4ab4-3a07f919e5db',
          '2e4bf5c2-18ea-8eac-c912-3a07f919e824',
          '543f1dd6-26a8-e32c-ff0d-3a07f919ea72',
          '1262fc74-445d-b3bf-0d52-3a07f919ec39',
          'd49e332b-095e-46cc-9962-3a07f919edca',
          'e8cadc7a-1946-2ba7-d319-3a07f919efa2',
          '6a6ea63f-df6b-317a-d496-3a07f9160f51',
          'dcae15bf-7ddd-0efe-7872-3a07f919f17b',
          'a2745c52-f6a9-413e-06fd-3a07f919f1df',
          'b6428aff-5fdc-4684-eda7-3a07f919f2ab',
          'cc0195b1-4ef2-1bff-53ee-3a07f919f3f3',
          '0ccb83c1-8ada-86bf-5ad4-3a07f919f4af',
          'eb221907-8826-4f02-2154-3a07f919f5a8',
          'c06f90d4-a64d-feef-09d6-3a07f919f705',
          'c3c55edb-04bc-7113-ca0b-3a07f919f7fd',
          '6862bbad-8325-476a-1489-3a07f919f852',
          '190bb1de-da0a-e494-ab6d-3a07f919f8db',
          '93ecd267-af81-bedc-b278-3a07f919f996',
          '7985b958-aad3-3b2d-71cc-3a07f919fa96',
          '0f78f8fc-afdb-c96f-518b-3a07f919fb64',
          '943f47e4-a530-46aa-04d8-3a07f919fca3',
          'ae831b51-8ce6-8dcb-ac2c-3a07f919fd7b',
          'd9a0d433-5d82-7cab-35ca-3a07f919fe64',
          '9682a130-c459-8381-075f-3a07f919ff9d',
          'd8d55b55-99a5-2755-891e-3a07f91a0078',
          'a17b37c3-95da-3209-cef1-3a07f91a01a5',
          '157afbda-1d34-e221-dc4a-3a07f91a02d0',
          '0bf053a4-0731-84fc-d597-3a07f91a0351',
          '7ac096af-2c54-4231-8357-3a07f91a03cb',
          'd1fc6b23-6041-b82e-a4ad-3a07f91a047f'
        ]
      },
      props.statusCode
    ).then((res: any) => {
      reportData.value = res
        .map((value) => {
          return {
            ...value,
            spinngDuration: (value.spinngDuration / 60).toFixed(2),
            spinningStart: dayjs(value.spinningStart).format('YYYY-MM-DD HH:mm'),
            spinningEnd: dayjs(value.spinningEnd).format('YYYY-MM-DD HH:mm')
          }
        })
        .sort((a, b) => {
          return a.machineName.localeCompare(b.machineName, undefined, {
            numeric: true,
            sensitivity: 'base'
          })
        })
      gridOption.data = reportData.value

      handleChartDataRender(reportData.value[0].machineName)
    })
  }

  const gridEvents: VxeGridListeners = {
    cellClick({ row, column }) {
      if (column.field === 'machineName') {
        handleChartDataRender(row.machineName)
      }
    }
  }

  // 处理图表数据及渲染
  const xAxisArr = ref([])
  const ciShuArr = ref([])
  const manTongArr = ref([])
  const tpCntArr = ref([])
  const asCntArr = ref([])
  const aCntArr = ref([])
  const cvCntArr = ref([])
  const handleChartDataRender = (name) => {
    let data = reportData.value.filter((value) => {
      return value.machineName === name
    })
    xAxisArr.value = data.map((value) => {
      return value.barrelNo
    })
    ciShuArr.value = data.map((value) => {
      return value.stopCnt
    })
    manTongArr.value = data.map((value) => {
      return value.spinngDuration
    })
    if (props.statusCode === '11570') {
      tpCntArr.value = data.map((value) => {
        return value.tpCnt
      })
      asCntArr.value = data.map((value) => {
        return value.asCnt
      })
      aCntArr.value = data.map((value) => {
        return value.aCnt
      })
      cvCntArr.value = data.map((value) => {
        return value.cvCnt
      })
    }
    handleSetVisitChart()
  }

  const myChart = ref()
  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('zuXingTuID'))
    let option = {
      color: COLOR_ARR,
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      legend: {
        data:
          props.statusCode === '11870'
            ? ['停车次数', '满筒用时']
            : ['停车次数', 'TP次数', 'AS%次数', 'CV%次数', 'A%次数', '满筒用时'],
        selected:
          props.statusCode === '11870'
            ? { 停车次数: true, 满筒用时: true }
            : {
                停车次数: true,
                TP次数: false,
                'AS%次数': false,
                'CV%次数': false,
                'A%次数': false,
                满筒用时: true
              }
      },
      grid: {
        top: '12%',
        left: '2%',
        right: '2%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: xAxisArr.value
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '次数',
          position: 'left',
          offset: 0,
          alignTicks: true,
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#fff'],
              opacity: 0.06
            }
          },
          axisLabel: {
            formatter: '{value} 次',
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        {
          type: 'value',
          name: '用时',
          position: 'right',
          offset: 0,
          alignTicks: true,
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#fff'],
              opacity: 0.06
            }
          },
          axisLabel: {
            formatter: '{value} 分钟',
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        }
      ],
      series:
        props.statusCode === '11870'
          ? [
              {
                name: '停车次数',
                type: 'bar',
                barGap: 0,
                yAxisIndex: 0,
                data: ciShuArr.value
              },
              {
                name: '满筒用时',
                type: 'bar',
                barGap: 0,
                yAxisIndex: 1,
                data: manTongArr.value
              }
            ]
          : [
              {
                name: '停车次数',
                type: 'bar',
                barGap: 0,
                yAxisIndex: 0,
                data: ciShuArr.value
              },
              {
                name: 'TP次数',
                type: 'bar',
                barGap: 0,
                yAxisIndex: 0,
                data: tpCntArr.value
              },
              {
                name: 'AS%次数',
                type: 'bar',
                barGap: 0,
                yAxisIndex: 0,
                data: asCntArr.value
              },
              {
                name: 'CV%次数',
                type: 'bar',
                barGap: 0,
                yAxisIndex: 0,
                data: cvCntArr.value
              },
              {
                name: 'A%次数',
                type: 'bar',
                barGap: 0,
                yAxisIndex: 0,
                data: aCntArr.value
              },
              {
                name: '满筒用时',
                type: 'bar',
                barGap: 0,
                yAxisIndex: 1,
                data: manTongArr.value
              }
            ]
    }
    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      setTimeout(function () {
        myChart.value.resize()
      }, 100)
    })
  }

  onMounted(() => {
    getReportList()
  })
</script>

<style scoped>
  :deep(.col-underline) {
    color: #74c239;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
